import React, {useEffect, useMemo, useState} from "react";
import {Avatar, Empty, Table, Tag} from "@douyinfe/semi-ui";
import {IllustrationNoResult, IllustrationNoResultDark} from "@douyinfe/semi-illustrations";
import {getbuilderlist} from "../../../api/api.js";
import Builder_modal from "../../../compents/change_modal/Builder_modal.jsx";
import Baidu_mapDemo from "./compents/Ant_Map.jsx";
import Builder_AForm from "./compents/Builder_AForm.jsx";
import Builder_EForm from "./compents/Builder_EForm.jsx";
import {BuildingFour, CategoryManagement} from "@icon-park/react";

function Builder_table() {
    const [dataSource, setData] = useState();
    const [currentPage, setPage] = useState(1);
    const [totaal, settotal] = useState(0);
    const [pSize, setPSize] = useState(5);
    useEffect(()=>{
        const form = new FormData;
        form.append("pageNo",1)
        form.append("pageSize",5)
        getbuilder(form);

    },[])
    async function getbuilder(form){
        const res = await getbuilderlist()
        res.data.data.forEach(v=>{
            v.sex2 = v.sex
            if (v.sex==1){
                v.sex =  <Tag style={{backgroundColor:'rgba(var(--semi-blue-3), 1)'}} type="light">男寝楼</Tag>
            }else {
                v.sex = <Tag color="red" type="light">女寝楼</Tag>
            }
        })
        console.log(res)
        settotal(res.data.data.count)
        let tableData = {...res.data.data}
        const colorArray = ["amber", "blue", "cyan", "green", "grey", "indigo", "light-blue", "light-green", "lime", "orange", "pink", "purple", "red", "teal", "violet", "yellow"]
        const colorLength = colorArray.length - 1
        let arr = []

        Object.keys(tableData).forEach((key) => {
            tableData[key].avatarBg = colorArray[parseInt(Math.random() * (colorLength + 1),10)]
            tableData[key].key = tableData[key].buildName
            arr.push(tableData[key])
        })
        console.log(arr)
        setData(arr)
    }
    const rowSelection = {
        getCheckboxProps: record => ({
            disabled: record.name === '设计文档',
            name: record.name,
        }),
        onSelect: (record, selected) => {
        },
        onSelectAll: (selected, selectedRows) => {
        },
        onChange: (selectedRowKeys, selectedRows) => {
        },
    };
    const test = [
        {
            text: '计算机科学与技术',
            value: '计算机科学与技术',
        },
        {
            text: '网络工程',
            value: '网络工程',
        },
    ]

    const columns = [
        {
            title: '寝室楼',
            dataIndex: 'buildName',
            width: 200,
            render: (text, record, index) => {
                return (
                    <div>
                        <Avatar size="small" color={record.avatarBg} style={{ marginRight: 4 }}>
                            {typeof text === 'string' && text.slice(0, 1)}
                        </Avatar>
                        {text}
                    </div>
                );
            },
        },
        {
            title: '楼号',
            dataIndex: 'lid',
        },
        {
            title: '已入住人数',
            dataIndex: 'cout',

        },
        {
            title: '最大可住人数',
            dataIndex: 'specsum',

        },
        {
            title: '寝室楼类别',
            dataIndex: 'sex',
        },
        {
            title: '入住率',
            dataIndex: 'odds',
        },
        {
            title: '操作',
            dataIndex: 'operate',
            render: (text, record) => (
                <Builder_EForm mess={[record
                ]}></Builder_EForm>
            ),
        },
    ];
    const empty = (
        <Empty
            image={<IllustrationNoResult />}
            darkModeImage={<IllustrationNoResultDark />}
            description={'无学生信息'}
        />
    );
    const pagination = useMemo(
        () => ({
            pageSize: 8,
        }),
        []
    );
    async function handlePageChange(currentPage, pageSize) {
        setPSize(pageSize)
        setPage(currentPage)
        let form = new FormData()
        form.append('pageSize', pageSize)
        form.append('pageNo', currentPage)
        const res =  await getRCount(form)
    }
    return (
        <>
            {/*<div style={{marginLeft:"85%",marginBottom:"1%"}}>寝室楼管理</div>*/}
            <h2><BuildingFour theme="outline" size="24" fill="#4a90e2"/> 寝室楼位置</h2>
            <Baidu_mapDemo></Baidu_mapDemo>
            <h2><CategoryManagement theme="outline" size="24" fill="#4a90e2"/> 寝室楼管理</h2>
            {/*<Cascader*/}
            {/*    onChange={Search}*/}
            {/*    value={selectedValues}*/}
            {/*    style={{ width: 260,marginRight:'15px' }}*/}
            {/*    treeData={trdata}*/}
            {/*    placeholder="请选择学院/系部/专业/班级"*/}
            {/*/>*/}
            <Builder_AForm></Builder_AForm>
            <Table  empty={empty} style={{marginTop:'15px'}} bordered={true} columns={columns} dataSource={dataSource} rowSelection={rowSelection} pagination={pagination} />
        </>
    );
}
export default Builder_table;